<template>
  <div>
    <el-dialog
      title="编辑文档"
      :visible.sync="visible"
      :show="show"
      width="70%"
      :before-close="handleClose"
    >
      <div class="dialog_box">
        <el-form ref="form" label-width="80px">
          <el-form-item label="工程">
            <el-select v-model="addForm.project_id" placeholder="请选择工程" style="width:100%;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="addForm.title" placeholder="请输入标题" style="width:100%;"></el-input>
          </el-form-item>
          <el-form-item label="图片" v-if="modalData.addType == '1'">
            <div class="edit_box">
              <el-upload
                :action="upFileUrl"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :file-list="files"
                name="files"
                :headers="headers"
                :data="fileData"
                :on-exceed="handleExceed"
                :on-success="upSuccess1"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </div>
          </el-form-item>
          <el-form-item label="详情" v-else>
            <div class="edit_box">
              <vab-quill :min-height="400"></vab-quill>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getProjectList, addMorningText } from "@/api/project";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import vabQuill from "@/plugins/vabQuill";
export default {
  props: {
    //对话框显示状态
    show: { type: Boolean, default: false },
    modalData: Object,
  },
  components: { vabQuill },
  data() {
    return {
      imgList: [],
      //提交的表单内容
      addForm: {
        project_id: "", //项目id
        title: "", //标题
        pic: "", //照片
      },
      dialogImageUrl: "",
      dialogVisible: false,
      upFileUrl: "http://192.168.101.192/shouhuzhe/public/index/uploads/upload",
      fileData: {
        //请求的额外参数
        path_type: "1",
        file_type: "2",
      },
      headers: {
        "X-Requested-With": "XMLHttpRequest",
      },
      files: [],
      visible: this.show,
      options: [],
      value: "",
    };
  },
  watch: {
    show: {
      immediate: true,
      handler(show) {
        this.visible = this.show;
      },
    },
  },
  created() {
    console.log("组件加载");
    var that = this;
    that.getAllList();
  },
  mounted() {},
  methods: {
    async submitForm() {
      console.log("提交表单");
      var that = this;
      switch (that.modalData.addType) {
        case 1:
          console.log("早会");
          that.addForm.pic = that.imgList.toString();
          console.log(that.addForm);
          const res = await addMorningText(that.addForm);
          console.log(res);
          if (res.status == 1) {
            that.$message({
              message: "早会添加成功",
              type: "success",
            });
            that.handleClose();
          }
          break;

        default:
          break;
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //上传图片方法
    upSuccess1(res) {
      console.log("上传成功");
      console.log(res);
      var that = this;
      that.imgList.push(res.data.utl);
    },
    //上传前验证
    handleExceed() {},
    //获取项目列表
    async getAllList() {
      var that = this;
      var param = {
        title: "",
        page: "1",
        page_size: "100",
      };
      const res = await getProjectList(param);
      console.log(res);
      if (res.data) {
        that.options = res.data;
      }
    },
    handleClose() {
      this.$emit("update:show", false);
    },
  },
};
</script>

<style scoped lang="scss">
.dialog_box {
  text-align: left;
}
.edit_box {
  width: 100%;
  height: 400px;
}
</style>
